/*! @import "loading-spinner"; */

/**
 * @see {@link https://github.com/lukehaas/css-loaders}
 * projects.lukehaas.me/css-loaders/
 * size of a loader dependent on font size
 */

.is-active-loading-spinner .loading-spinner {
	font-size: 0.500em;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -5.000em 0 0 -5.000em;
	text-indent: -9999em;
	border-top: 1.000em solid $color-rgba-loading-spinner-bg;
	border-right: 1.000em solid $color-rgba-loading-spinner-bg;
	border-bottom: 1.000em solid $color-rgba-loading-spinner-bg;
	border-left: 1.000em solid $color-rgba-loading-spinner-text;
	transform: translateZ(0);
	animation: load8 1.1s infinite linear;
}

.is-active-loading-spinner .loading-spinner,
.is-active-loading-spinner .loading-spinner:after {
	border-radius: 50%;
	width: 10.000em;
	height: 10.000em;
}

@keyframes load8 {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

